<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">
          查询搜索
        </el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 30px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">

          <el-form-item label="输入搜索：">
            <el-input v-model="listQuery.name" placeholder="姓名" clearable></el-input>
          </el-form-item>

          <!-- <el-form-item label="日期：">
            <el-input v-model="listQuery.dateNo" clearable></el-input>
          </el-form-item> -->

          <el-form-item label="日期：">
            <el-date-picker style="width: 300px" v-model="dateRange" value-format="yyyy-MM-dd HH:mm:ss"
              @change="changeTime" :default-time="['00:00:00', '23:59:59']" type="daterange" range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>

          <el-form-item label="班级：">
            <el-select v-model="listQuery.sourceType" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>

    </el-card>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>

    <div class="table-container">
      <el-table ref="adminTable" :data="list" style="width: 100%;" v-loading="listLoading" border>

        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>

        <el-table-column label="打坐日期" min-width="50px" align="center" prop="dateNo">
          <template slot-scope="scope">{{ scope.row.dateNo }}</template>
        </el-table-column>

        <el-table-column label="类型" min-width="45px" align="center" prop="type">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">打卡</span>
            <span v-else-if="scope.row.type === 2">请假</span>
            <span v-else-if="scope.row.type === 3">旷卡</span>
            <span v-else>未知</span>

          </template>

        </el-table-column>

        <el-table-column label="用户名称" min-width="50px" align="center" prop="type">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="开始时间" min-width="70px" align="center" prop="startTime">
          <template slot-scope="scope">{{ scope.row.startTime | formatDateTime }}</template>
        </el-table-column>

        <el-table-column label="结束时间" min-width="70px" align="center" prop="endTime">
          <template slot-scope="scope">{{ scope.row.endTime | formatDateTime }}</template>
        </el-table-column>

        <el-table-column label="打坐时长(分钟)" min-width="70px" align="center" prop="timeInterval">
          <template slot-scope="scope">{{ scope.row.timeInterval }}</template>
        </el-table-column>

        <el-table-column label="提交时间" min-width="70px" align="center" prop="createTime">
          <template slot-scope="scope">{{ scope.row.createTime | formatDateTime }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200px">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">

        <el-form-item v-if="title == '新增'" label="添加班级">
          <el-radio v-model="form.addType" label="1">结缘群</el-radio>
          <el-radio v-model="form.addType" label="2">西天群</el-radio>
        </el-form-item>

        <el-form-item v-if="form.addType == 1" label="名称" prop="clockMemberId">
          <el-select v-model="form.clockMemberId" filterable placeholder="请选择名称">
            <el-option v-for="item in usernameOptions" :key="item.id" :label="item.username" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="form.addType == 2" label="名称" prop="clockMemberId">
          <el-select v-model="form.clockMemberId" filterable placeholder="请选择名称">
            <el-option v-for="item in usernameWestOptions" :key="item.id" :label="item.username" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="签到日期" prop="signDate">
          <el-date-picker v-model="form.signDate" value-format="yyyy-MM-dd hh:mm:ss" type="date"
            placeholder="选择日期"></el-date-picker>
          </el-date-picker>
        </el-form-item>

        <el-form-item label="打卡时长" prop="timeInterval">
          <el-input-number :min="60" v-model="form.timeInterval" controls-position="right" />
        </el-form-item>

        <el-form-item label="打卡类型" prop="type">
          <el-radio-group v-model="form.type" size="small">
            <el-radio-button label="1">打卡</el-radio-button>
            <el-radio-button label="2">请假</el-radio-button>
            <el-radio-button label="3">旷卡</el-radio-button>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>


    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20]" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
// 导入接口
import { sitQuietlClockList, addClock, deleteClock, updateClock, listUsername } from '@/api/login';
import { formatDate, getDateNo, getToday } from '@/utils/date';
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  dateNo: getDateNo(),
  sourceType: 1,
};
const defaultAdmin = {
  sourceType: 1,
  dateNo: getDateNo()
};
export default {
  name: 'clocList',
  data() {
    return {
      dateRange: [],
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      admin: Object.assign({}, defaultAdmin),
      options: [
        {
          value: 1,
          label: '结缘2023期'
        }, {
          value: 2,
          label: '西天群'
        }],
      // 选择用户列表
      usernameOptions: [],
      usernameWestOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: { timeInterval: 60, },
      // 表单校验
      rules: {
        type: [{
          required: true,
          message: "打卡类型不能为空",
          trigger: "blur"
        }],
        signDate: [{
          required: true,
          message: "签到日期不能为空",
          trigger: "blur"
        }],
        timeInterval: [{
          required: true,
          message: "打卡时长不能为空",
          trigger: "blur"
        }],
        clockMemberId: [{
          required: true,
          message: "打卡人不能为空",
          trigger: "blur"
        }],
      }

    }
  },
  created() {
    this.dateRange[0] = getToday() + ' 00:00:00'
    this.dateRange[1] = getToday() + ' 23:59:59'
    this.listQuery.startDate = this.dateRange[0]
    this.listQuery.endDate = this.dateRange[1]
    this.getList();
    this.getUsernameOptions(1);
    this.getUsernameWestOptions(2);

  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      sitQuietlClockList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    /** 用户选择列表 */
    getUsernameOptions() {
      listUsername(1).then(res => {
        this.usernameOptions = res.data;
      });
    },
    getUsernameWestOptions() {
      listUsername(2).then(res => {
        this.usernameWestOptions = res.data;
      });
    },
    changeTime(e) {
      if (this.dateRange) {
        this.listQuery.startDate = this.dateRange[0]
        this.listQuery.endDate = this.dateRange[1]
      } else {
        delete this.listQuery.startDate
        delete this.listQuery.endDate
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增";
    },
    // 表单重置
    reset() {
      this.form = {
        dateNo: '',
      };
      // this.form = {};
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = { ...row }
      // 重写
      this.form.type += ''
      this.form.timeInterval += ''
      this.open = true;
      this.title = "修改";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否要删除该打卡记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteClock(row.id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        });
      });
    },
    /** 提交按钮 */
    submitForm() {
      console.log('message:' + this.form.id)
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateClock(this.form).then(response => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.open = false;
              this.getList();
            });
          } else {
            addClock(this.form).then(response => {
              this.$message({
                type: 'success',
                message: '新增成功!'
              });
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    // 表单重置
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },

    // 添加日期范围
    addDateRange(params, dateRange, propName) {
      let search = params;
      search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
      dateRange = Array.isArray(dateRange) ? dateRange : [];
      if (typeof (propName) === 'undefined') {
        search.params['beginTime'] = dateRange[0];
        search.params['endTime'] = dateRange[1];
      } else {
        search.params['begin' + propName] = dateRange[0];
        search.params['end' + propName] = dateRange[1];
      }
      return search;
    }

  }
}
</script>
<style></style>


